import React from 'react';
import { forwardRef } from 'react';
import './index.scss';

export interface WeatherAlertProps {
  width?: string | number;
  height?: string | number;
  backgroundColor?: string;
  backgroundOpacity?: number;
  borderRadius?: number;
  iconPath?: string;
  iconSize?: {
    width?: number;
    height?: number;
  };
  timeLabel?: string;
  alertTitle?: string;
  alertCount?: string | number;
  timeLabelColor?: string;
  alertTitleColor?: string;
  alertCountColor?: string;
  showGradientText?: boolean;
  gradientColors?: string[];
  fontSize?: {
    timeLabel?: number;
    alertTitle?: number;
    alertCount?: number;
  };
  fontWeight?: {
    timeLabel?: string | number;
    alertTitle?: string | number;
    alertCount?: string | number;
  };
  onIconClick?: () => void;
  onContentClick?: () => void;
  theme?: 'light' | 'dark';
  style?: React.CSSProperties;
  className?: string;
  onClick?: () => void;
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const WeatherAlert = forwardRef<HTMLDivElement, WeatherAlertProps>((props, ref) => {
  const {
    width = 220,
    height = 48,
    backgroundColor = '#586570',
    backgroundOpacity = 0.38,
    borderRadius = 4,
    iconPath = 'http://localhost:8085/static/images/qixiangfangzhai/bz14.png',
    iconSize = { width: 32, height: 32 },
    timeLabel = '1小时圈',
    alertTitle = '重点城市气象告警',
    alertCount = '0',
    timeLabelColor = '#FFFFFF',
    alertTitleColor = 'rgba(255,255,255,0.8)',
    alertCountColor = '#1AD7FF',
    showGradientText = true,
    gradientColors = ['#FFFFFF', '#81C6FF'],
    fontSize = {
      timeLabel: 14,
      alertTitle: 14,
      alertCount: 24
    },
    fontWeight = {
      timeLabel: 500,
      alertTitle: 400,
      alertCount: 'bold'
    },
    onIconClick,
    onContentClick,
    theme = 'dark',
    style = {},
    className = '',
    onClick,
    __designMode,
    componentId,
    _componentName,
    forwardRef: forwardRefProp,
    ...otherProps
  } = props;

  const componentStyle: React.CSSProperties = {
    width: typeof width === 'number' ? `${width}px` : width,
    height: typeof height === 'number' ? `${height}px` : height,
    '--background-color': backgroundColor,
    '--background-opacity': backgroundOpacity,
    '--border-radius': `${borderRadius}px`,
    '--gradient-start': gradientColors[0] || '#FFFFFF',
    '--gradient-end': gradientColors[1] || '#81C6FF',
    ...style
  } as React.CSSProperties;

  const handleIconClick = (e: React.MouseEvent) => {
    e.stopPropagation();
    if (onIconClick) {
      onIconClick();
    }
  };

  const handleContentClick = (e: React.MouseEvent) => {
    e.stopPropagation();
    if (onContentClick) {
      onContentClick();
    }
  };

  const weatherAlertClassName = ['weather-alert', theme, className].filter(Boolean).join(' ');

  return (
    <div
      ref={ref}
      className={weatherAlertClassName}
      style={componentStyle}
      onClick={onClick}
      data-component-id={componentId}
      data-component-name={_componentName}
      data-design-mode={__designMode}
      {...otherProps}
    >
      {/* 背景容器 */}
      <div className="alert-background" />

      {/* 气象图标 */}
      <div 
        className="alert-icon"
        style={{
          width: `${iconSize.width}px`,
          height: `${iconSize.height}px`,
          backgroundImage: iconPath ? `url(${iconPath})` : undefined
        }}
        onClick={handleIconClick}
      />

      {/* 内容区域 */}
      <div className="alert-content" onClick={handleContentClick}>
        {/* 时间标签 */}
        <div 
          className="time-label"
          style={{
            color: timeLabelColor,
            fontSize: `${fontSize.timeLabel}px`,
            fontWeight: fontWeight.timeLabel
          }}
        >
          {timeLabel}
        </div>

        {/* 告警标题 */}
        <div 
          className="alert-title"
          style={{
            color: alertTitleColor,
            fontSize: `${fontSize.alertTitle}px`,
            fontWeight: fontWeight.alertTitle
          }}
        >
          {alertTitle}
        </div>
      </div>

      {/* 告警数量 */}
      <div 
        className={`alert-count ${showGradientText ? 'gradient-text' : ''}`}
        style={{
          color: !showGradientText ? alertCountColor : undefined,
          fontSize: `${fontSize.alertCount}px`,
          fontWeight: fontWeight.alertCount
        }}
      >
        {alertCount}
      </div>
    </div>
  );
});

WeatherAlert.displayName = 'WeatherAlert';

export default WeatherAlert; 